<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	#dynamic-table img {
		cursor: pointer;
		max-height: 200px;
	}
	#cboxClose {
		text-indent: 0;
		font-size: 50px;
		font-weight: bold;
		margin-top: 10px;
		color: red;
	}
</style>
<div class="page-header">
	<h1>
		德育动态管理
		<small>
			<a href="<?=admin_url('moral/timeline_edit')?>" class="blue ml10">
				<i class="ace-icon fa fa-plus"></i> 新增动态
			</a>
		</small>
	</h1>
</div>
<div class="col-xs-12 content-filter">
	<div class="widget-box">
		<div class="widget-header" style="vertical-align:middle;">
			<h4 class="widget-title">
				内容筛选
			</h4>
			<div class="widget-toolbar">
				<a href="#" data-action="collapse">
					<i class="ace-icon fa fa-chevron-up"></i>
				</a>
				<a href="#" data-action="close">
					<i class="ace-icon fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline keyword-search-div">
					<label class="keyword-search-label">标题&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box">	
                        <input style="float:left;height:30px;width:220px;border:1px solid #669FC7;padding:0 30px 0 14px;border-radius:10px 0 0 10px !important;-moz-border-radius:10px 0 0 10px;" type="text" name="title" placeholder="搜索标题..." autocomplete="off">
                        <span id="empty-search" style="position:relative;right:64px;cursor:pointer;display:none;">×</span>
                        <button id="btn-search" class="btn-search" style="outline:none;float:left;height:30px;width:44px;border:1px solid #669FC7;background-color:#669FC7;border:0;border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;">
                            <i class="ace-icon fa fa-search nav-search-icon white"></i>
                        </button>
					</div>
                </div>
                <div class="form-inline keyword-search-div">
					<label class="keyword-search-label">栏目&nbsp;&nbsp;&nbsp;&nbsp;</label>
					<div class="keyword-search-box" id="div-subject">
						<a href="javascript:;" class="keyword-search-keyword active" data-id="0">全部</a>
						<?php foreach($subjectList as $subject): ?>
							<a href="javascript:;" class="keyword-search-keyword" data-id="<?=$subject['id']?>"><?= $subject['title'] ?></a>
						<?php endforeach; ?>
					</div>
                </div>
			</div>
		</div>
	</div>
</div>
<div class="col-xs-12">
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
                <th>动态标题</th>
                <th>所属栏目</th>
                <!-- <th>动态内容</th> -->
                <th>动态封面</th>
				<th>排序值</th>
				<th>创建时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
		// 动态表格
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('moral/get_timeline_list')?>',
			"columns": [
                {"data": "title"},
                {"data": "subject_title"},
                // {"data": "content"},
	            {"data": function(ret){
					if(ret.cover) {
						return '<div class="ace-thumbnails"><a href="' + ret.cover + '" data-rel="colorbox" class="cboxElement"><img src="' + ret.cover + '!thumb" width="128"/></a></div>';
					} else {
						return '';
					}
	            }},
	            {"data": "sort"},
	            {"data": "createtime"},
	            {"data": function(ret){
	            	var action = '';
	            	action += '<a class="edit-timeline green mr20" href="<?= admin_url('moral/timeline_edit/') ?>' + ret.id + '"><i class="fa fa-edit"></i> 修改</a>';
					action += '<a class="text-danger delete-timeline" href="javascript:" data-id=' + ret.id +  ' data-title=' + ret.title + '><i class="fa fa-times"></i> 删除</a>';
					return action;
	            }},
			]
		});
		// 点击关键字
		$("body").on("click", ".keyword-search-keyword", function(){
			var id = $(this).data("id");
			// 高亮当前点击对象
			$(this).parent().find(".keyword-search-keyword").removeClass("active");
			$(this).addClass("active");
			// 筛选
			table.setAjaxData({
				"subject_id": $("#div-subject .active").data("id"),
				"title": $("[name=title]").val()
			});
		});
		// 敲回车就搜索
		$("[name=title]").keypress(function (e) {
			if (e.which == 13) {
				$("#btn-search").trigger("click");
			}
		});
		// 清空搜索框
		$("[name=title]").keyup(function() {
			if($(this).val().length > 0) {
				$("#empty-search").show();
				$("#empty-search").click(function(){
					$("[name=title]").val('');
					$(this).hide();
					// 重置搜索结果
					table.setAjaxData({
						"subject_id": $("#div-subject .active").data("id"),
						"title": $("[name=title]").val()
					});
				})
			} else {
				$("#empty-search").hide();
			}
		});
		// 搜索标题
		$("#btn-search").click(function() {
			var keyword = $("[name=title]").val();
			if(keyword != '') {
				table.setAjaxData({
					"subject_id": $("#div-subject .active").data("id"),
					"title": keyword
				})
			}
		})
		// 保存动态按钮
		var timelineForm = $("#timeline-form");
		$("#save-timeline").click(function(){
			timelineForm.submit();
		})
		var submitUrl = "<?=admin_url('moral/save_timeline_action')?>";
		form_submit(timelineForm, submitUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) window.location.reload();
			});
		})
		// 删除动态
		$("body").on('click', '.delete-timeline', function() {
			var id = $(this).data('id');
			var title = $(this).data('title');
			var posturl = "<?= admin_url("moral/delete_timeline_action") ?>";
			var data = {
				'id': id
			};
			layer.confirm('确定删除：' + title + '？', { title:"提示", offset: '160px' }, function(){
				ajax_post(posturl, data, function() {
					// 刷新页面
					window.location.reload();
				});
			});
		});
		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 100);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 1000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 2000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 3000);
		setTimeout(() => {
			$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		}, 5000);
	})
</script>